<template>
  <div class="main-content product">
      <div class="title">
        <span>外贸融，提前享用退税款</span>
      </div>
<!--      <el-row class="item">
        <el-col :span="8">

        </el-col>
      </el-row>-->
    <div class="item-main" v-for="(item, index) in productList" :class="index==0?'item-main1':''">
      <div class="im-container">
        <img :src="item.logo" :class="item.productCode==zsProductCode?'img112':''" />
      </div>
      <div class="im-footer">
        <el-button :disabled="!item.fundCode" @click="toDetail(item)" type="warning">立即申请</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {queryProductItemsNoLogin} from '@/api/product/product';

export default {
  name:'selectBank',
  data() {
    return {
      productList:[{fundCode:'1'}],
      nbProductCode:process.env.NB_CODE,
      zsProductCode:process.env.ZS_CODE,
    };
  },
  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  mounted(){
    let _this = this;
    this.productList = [];
    queryProductItemsNoLogin().then(res => {
      if (res.code === 200) {
        //_this.productList =  res.data.filter(item => item.fundCode==res.data.fundCode);
        _this.productList =  res.data
      }
    });
  },
  methods:{
    toDetail(item) {
      this.$emit('selected-bank', item);
    }
  }
}
</script>

<style lang="scss">
.product{
  height: 100%;
  width: 100%;
  background: white;
  .item-main{

    border: 1px solid #F4F4F4;
    border-radius: 8px;
    box-shadow: 4px 4px 7px 0px rgba(47,65,93,0.05);
    width: 253px;
    height: 256px;
    float: left;
    margin-top: 46px;
    margin-right: 87px;
    /*margin: 0 auto 40px auto;*/
    .item-select_title{
      font-size: 18px;
      color: #666;
      text-align: center;
      width: 100%;
      float: left;
      .is-top{
        color: #909399;
        font-size: 14px
      }
      .is-top_title{
        color: #FFA01D;
        margin-bottom: 4px;
      }
      .is-top_main{
        width: 240px;
        margin: 0 auto;
        height: 50px;
        font-size: 12px;
        p{
          margin: 4px 0;
        }
      }
    }
    .im-container{
      width: 100%;
      height: 130px;
      margin-top: 34px;
      text-align: center;
      img{
        width: 126px;
        /*height: 126px;*/
      }
      .img112{
        width: 111px;
      }
    }
    .im-footer{
      text-align: center;
      margin: 21px 0;
      .el-button{
        width: 175px;
        height: 40px;

        box-shadow: 0px 2px 7px 0px rgba(254,159,30,0.54);
        border-radius: 4px;
      }
    }
  }
  .item-main1{
    margin-left: 104px;
  }

  .title{
    text-align: center;
    font-size: 20px;

    font-weight: 600;

    color: #2D2E49;
    margin-top: 50px;
    .icon-address{
      float: right;
      font-size: 13px;
      padding-right: 120px;
      cursor: pointer
    }
    .pt-address{
      position: relative;
      right: 0;
      top: -32px;
      text-align: right;
      padding-right: 100px;
      .pt-button{
        color: #FFA01D;
      }
      .pt-button:hover{
        background: none;
        border-color: white;
      }
    }
  }
  .item{
    /*margin-left: 70px;
    margin-right: 100px;*/
    margin-top: 40px;
  }
  .item-more{
    text-align: right;
    color: #FFA01D;
    padding-right: 90px;
    margin-top: 40px;
    font-size: 14px;
    cursor: pointer
  }

}
</style>
